<template>
  <transition name = "AudioMaskLayer">
    <div class = "AudioMaskLayer" v-show = "showAudioMask">
      <!--头部-->
      <div class = "mask-header">
        <div class = "left">
          <div class = "down-div">
            <i-down style = "padding-left:10px " @click = "store.commit('UserInterface/SWITCHSHOWAUDIOMASK')"
                    theme = "two-tone" size = "25"
                    :fill = "['#313131' ,'#fff']" />
          </div>
          <nextBackAndSearch text-color = "#808080" />
        </div>
        <!--设置和关闭窗口-->
        <settingAndClosing :show-person-info = "false" text-color = "#808080" />
      </div>
      <el-scrollbar
          height = "80vh"
          ref = "scrollbar"
          @scroll = "whenScroll"
      >
        <div class = "main-container" style = "padding: 0 10px">
          <!--歌名，歌词-->
          <div class = "mask-info">
            <el-row class = "info-container-top">
              <span>扉をあけて</span>
              <span>敞开心扉TV动画《魔卡少女樱》OP2；TVアニメ</span>
              <span><span>ANZA</span>-<span>扉をあけて</span></span>
            </el-row>
            <el-row class = "info-container-middle">
              <el-col :span = "12" class = "info-item">
                <el-avatar :size = "200" :src = "logo" />
              </el-col>
              <el-col :span = "12" class = "info-item">
                <div class = "lyrics-div">
                  <div class = "lyrics-scroll">
                    <span>lyrics</span>
                    <span>lyrics</span>
                    <span>lyrics</span>
                    <span>lyrics</span>
                    <span>lyrics</span>
                    <span>lyrics</span>
                    <span>lyrics</span>
                    <span>lyrics</span>
                    <span>lyrics</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <!--  歌曲评论-->
          <div class = "mask-comments">
            <div class = "comments-div">
              <!--全部评论-->
              <div>
                <span>全部评论（114514）</span>
              </div>
              <!--评论列表-->
              <ul>
                <base-comment v-for = "item in 8" :key = "item" />
              </ul>
            </div>

          </div>
          <!--发表评论-->
          <el-button @click = "showAudioMaskCommitDialog = true"
                     v-show = "showAudioMaskCommitButton" class = "dialog-button">发表你的音乐评论
          </el-button>
          <el-dialog
              v-model = "showAudioMaskCommitDialog"
              title = "Tips"
              :modal = "false"
              width = "30%"
          >
            <el-input
                v-model = "textarea2"
                :autosize = "{ minRows: 2, maxRows: 4 }"
                type = "textarea"
                placeholder = "Please input"
            />

            <template #footer>
              <div class = "row-container" style = "padding: 10px 0; justify-content: right">
                <el-button>评论</el-button>
              </div>

            </template>
          </el-dialog>
        </div>
      </el-scrollbar>
      <el-backtop
          target = ".AudioMaskLayer .el-scrollbar__wrap"
          :right = "150" :bottom = "150" />
    </div>
  </transition>
</template>

<script setup>
import NextBackAndSearch from "@/components/reuse/NextBackAndSearch";
import SettingAndClosing from "@/components/reuse/SettingAndClosing";
import logo from '@/assets/logo.png'

import {computed, ref} from "vue";
import BaseComment from "@/components/Base/BaseComment";
import store from "@/store";
//是否显示遮罩层
let showAudioMask = computed(() => store.state.UserInterface.showAudioMask)
//是否显示评论对话框按钮
let showAudioMaskCommitButton = computed(() => store.state.UserInterface.showAudioMaskCommitButton)
//是否显示评论对话框
let showAudioMaskCommitDialog = ref(false)

//当滚动到一定距离时，显示对话框
function whenScroll({scrollTop}) {
  let myScrollTop = Math.floor(scrollTop)
  if (myScrollTop > 200) {
    store.commit("UserInterface/SWITCHMASKCOMMITDIALOG", true)
  } else {
    store.commit("UserInterface/SWITCHMASKCOMMITDIALOG", false)
  }
}

//获取滚动条DOM
const scrollbar = ref(null)

</script>

<style lang = "less" scoped>
.AudioMaskLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 90vw;
  height: 89vh;
  min-width: 1150px;
  min-height: 538px;
  z-index: 3;
  background-image: linear-gradient(to bottom, #CAC1C8, #FFFFFF);


  .mask-header {
    padding: 0 10px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: center;
    }

    .down-div {
      width: 130px;
    }
  }

  .mask-info {
    margin: 15px 0;


    .info-container-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;

    }

    .info-container-middle {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;

      .info-item {
        display: flex;
        align-items: center;
        justify-content: center;

        .lyrics-div {

          .lyrics-scroll {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            overflow-y: hidden;


          }
        }
      }
    }


  }

  .mask-comments {
    //width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    margin-bottom: 20px;

    .comments-div {
      width: 60%;
      margin: auto;


    }

  }

  .dialog-button {
    position: absolute;
    bottom: 21%;
    left: 45%;
  }

}

:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}

//过渡动画
.AudioMaskLayer-enter-active,
.AudioMaskLayer-leave-active {
  transition: all 0.3s ease;
}

.AudioMaskLayer-enter-from,
.AudioMaskLayer-leave-to {
  //opacity: 0;
  top: 700px;
}

</style>